<template>
  <div>
    <!-- 加载中 -->
    <a-spin :spinning="isLoading" />
    <!-- 订单内容 -->
    <div v-if="!isLoading" class="order-content">
      <!-- 订单进度步骤条 -->

      <!-- 订单信息 -->
      <a-card class="mt-10" :bordered="false">
        <!-- 订单操作 -->
        <template>
          <div class="ant-descriptions-title">补件操作</div>
          <!-- 提示栏 -->
          <div class="alerts mt-10 mb-15" v-if="record.order_status== PatchStatusEnum.CANCELLED.value">
            <a-alert
              :message="record.update_time+'：用户取消了补件申请'"
              banner
            />
          </div>
          <!-- 提示栏 -->
          <div class="alerts mt-10 " v-if="record.order_status== PatchStatusEnum.CHECK_FAILED.value">
            <a-alert
              type="warning"
              :message="'当前订单已由管理员'+record.check_user+'驳回，审核时间:'+record.update_time+' 审核说明：'+record.check_remark"
            />
          </div>

          <!-- 提示栏 -->
          <div class="alerts mt-10 " v-if="record.order_status== PatchStatusEnum.COMPLETED.value">
            <a-alert
              message="该订单已完结"
              type="success"
            />
          </div>

          <div class="alerts mt-10 " v-if="record.order_status== PatchStatusEnum.CHECK_SUCCESS.value">
            <a-alert
              :message="'当前订单已由管理员'+record.check_user+'审核通过，审核时间:'+record.update_time+' 审核说明：'+record.check_remark"
            />
          </div>

          <!-- 操作栏 -->
          <div class="actions clearfix ">
            <div class="action-item" v-if="$auth('/patch/list/all.deliver') && record.order_status== PatchStatusEnum.NORMAL.value">
              <a-button
                v-if="
                  record.delivery_status == PatchStatusEnum.NORMAL.value
                "
                type="primary"
                @click="handleDelivery"
              >审核通过并发货1</a-button>
            </div>
            <div class="action-item" v-if="$auth('/patch/list/all.refuse') && record.order_status== PatchStatusEnum.NORMAL.value">
              <a-button
                v-if="record.order_status == PatchStatusEnum.NORMAL.value"
                type="danger"
                @click="handleCancel"
              >驳回订单</a-button>
            </div>

            <div class="action-item" v-if="$auth('/patch/list/all.refuse')">
              <a-button
                type="danger"
                @click="handleRemark"
              >填写备注</a-button>
            </div>

          </div>
          <a-divider class="o-divider" />
        </template>

        <!-- 订单信息 -->
        <a-descriptions title="订单信息">
          <a-descriptions-item label="订单号">{{ record.order_no }}</a-descriptions-item>
          <a-descriptions-item label="订单状态">
            <a-tag
              :color="PatchStatusEnum[record.order_status].color"
            >{{ PatchStatusEnum[record.order_status].name }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="配送状态">
            <a-tag
              :color="record.delivery_status == DeliveryStatusEnum.DELIVERED.value ? 'green' : ''"
            >{{ DeliveryStatusEnum[record.delivery_status].name }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="店铺信息">
            <a-tooltip>
              <span class="c-p">{{ record.shop_name }}</span>
              <span>&nbsp;&nbsp;[{{ record.shop_type_name }}]</span>
            </a-tooltip>
          </a-descriptions-item>
          <a-descriptions-item label="会员信息">
            <a-tooltip>
              <template slot="title">会员ID: {{ record.user.user_id }}</template>
              <span class="c-p">{{ record.user.nick_name }}</span>
            </a-tooltip>
          </a-descriptions-item>
          <a-descriptions-item label="补件留言">
            <strong v-if="record.buyer_remark">{{ record.buyer_remark }}</strong>
            <span v-else>--</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-card>

      <!-- 商品信息 -->
      <a-card class="mt-20" :bordered="false">
        <div class="ant-descriptions-title">补件详情</div>
        <div class="goods-list">
          <div class="goods-item">
            <div>
              <div><img :src="record.boxImg" @click="shopPic(record.boxImg)"/></div>
              <div>彩盒凭证</div>
            </div>
          </div>
          <div class="goods-item" v-for="(item,index) in record.images" :key="index">
            <div>
              <div><img :src="item.image" @click="shopPic(item.image)"/></div>
              <div>数量：{{ item.number }}</div>
            </div>
          </div>
        </div>
      </a-card>

      <!-- 快递配送 -->
      <a-card
        v-if="record.delivery_type == DeliveryTypeEnum.EXPRESS.value"
        class="mt-20"
        :bordered="false"
      >
        <!-- 收货信息 -->
        <a-descriptions title="收货信息">
          <a-descriptions-item label="收货人姓名">{{ record.address.name }}</a-descriptions-item>
          <a-descriptions-item label="联系电话">{{ record.address.phone }}</a-descriptions-item>
          <a-descriptions-item label="收货地区">
            {{ record.shop_region }}
          </a-descriptions-item>
          <a-descriptions-item label="详细地址">{{ record.address.detail }}</a-descriptions-item>
        </a-descriptions>
        <!-- 发货信息 -->
        <template
          v-if="(
            record.delivery_status == DeliveryStatusEnum.DELIVERED.value
              && !inArray(record.order_status, [PatchStatusEnum.CANCELLED.value])
          )">
          <a-divider class="o-divider" />
          <a-descriptions title="发货信息">
            <a-descriptions-item label="物流公司" >{{ record.express_company }}</a-descriptions-item>
            <a-descriptions-item label="物流单号">{{ record.express_no }}</a-descriptions-item>
            <a-descriptions-item label="发货状态">
              <a-tag
                :color="record.delivery_status == DeliveryStatusEnum.DELIVERED.value ? 'green' : ''"
              >{{ DeliveryStatusEnum[record.delivery_status].name }}</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="发货时间">{{ record.delivery_time }}</a-descriptions-item>
          </a-descriptions>
        </template>
      </a-card>

      <a-modal v-model="showPicModal" width="600px" :footer="null">
        <img :src="showPicUrl" style="max-width：500px;margin:0 auto;max-height:800px"/>
      </a-modal>

    </div>
    <DeliveryForm ref="DeliveryForm" @handleSubmit="handleRefresh" />
    <RemarkForm ref="RemarkForm" @handleSubmit="handleRefresh" />
    <PriceForm ref="PriceForm" @handleSubmit="handleRefresh" />

  </div>
</template>

<script>
import { inArray } from '@/utils/util'
import * as Api from '@/api/patch'
import { GoodsItem, UserItem } from '@/components/Table'
import { DeliveryForm, CancelForm, RemarkForm } from './modules'

import {
  DeliveryStatusEnum,
  DeliveryTypeEnum,
  OrderSourceEnum,
  OrderStatusEnum,
    PatchStatusEnum,
  PayStatusEnum,
  PayTypeEnum,
  ReceiptStatusEnum
} from '@/common/enum/order'

export default {
  name: 'Detail',
  components: {
    GoodsItem,
    UserItem,
    DeliveryForm,
    RemarkForm,
    CancelForm
  },
  data () {
    return {
      // 枚举类
      showDetail: false,
      DeliveryStatusEnum,
      DeliveryTypeEnum,
      OrderSourceEnum,
      OrderStatusEnum,
      PayStatusEnum,
      PatchStatusEnum,
      PayTypeEnum,
      ReceiptStatusEnum,
      // 外部方法
      inArray,
      // 正在加载
      isLoading: true,
      // 订单ID
      orderId: null,
      // 订单详情
      record: {},
      // 订单步骤位置
      progress: 2,
      // 商品内容表头
      showPicModal: false,
      showPicUrl: ''

    }
  },
  created () {
    // 记录订单ID
    this.orderId = this.$route.query.orderId
    // 刷新页面
    this.handleRefresh()
  },
  methods: {

      shopPic (src) {
        this.showPicModal = true
        this.showPicUrl = src
      },
    // 刷新页面
    handleRefresh () {
      // 获取当前记录
      this.getDetail()
    },

    // 获取当前记录
    getDetail () {
      const { orderId } = this
      this.isLoading = true
      Api.detail({ orderId })
        .then(result => {
          // 当前记录
          this.record = result.data.detail
          // 初始化数据
          this.initData()
        })
        .finally(() => {
          this.isLoading = false
        })
    },

    // 初始化数据
    initData () {
      // 步骤条位置
      // this.initProgress()
    },

    // // 步骤条位置
    // initProgress () {
    //   const { record } = this
    //   this.progress = 2
    //   record.pay_status === PayStatusEnum.SUCCESS.value && (this.progress += 1)
    //   record.delivery_status === DeliveryStatusEnum.DELIVERED.value && (this.progress += 1)
    //   record.receipt_status === ReceiptStatusEnum.RECEIVED.value && (this.progress += 1)
    // },

    // 订单发货
    handleDelivery () {
      const { record } = this
      this.$refs.DeliveryForm.show(record)
    },

    // 审核取消订单
    handleCancel () {
      const { record } = this
      this.$refs.CancelForm.show(record)
    },
      // 审核取消订单
    handleRemark () {
      const { record } = this
      this.$refs.RemarkForm.show(record)
    },

    // 订单改价
    handleUpdatePrice () {
      const { record } = this
      this.$refs.PriceForm.show(record)
    }

  }
}
</script>
<style lang="less" scoped>
@import '~ant-design-vue/es/style/themes/default.less';
// 订单详情页
.order-content {
  margin-bottom: 70px;

  /deep/.ant-descriptions-item > span {
    vertical-align: middle;
  }

  // 分割线
  .o-divider {
    margin-bottom: 32px;
  }

  // 步骤条
  .order-progress {
    height: 26px;
    line-height: 26px;
    background: #f8f8f8;
    border-radius: 13px;
    font-size: 14px;
    text-align: center;
    position: relative;

    &:before,
    &:after {
      content: '';
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      bottom: 0;
      border-radius: 13px;
      background: @primary-color;
    }

    &:after {
      background: ~`colorPalette('@{primary-color}', 3) `;
      z-index: 1;
    }

    &.progress-1 {
      &:before {
        width: 0;
      }

      &:after {
        width: 20%;
      }
    }

    &.progress-2 {
      &:before {
        width: 20%;
      }

      &:after {
        width: 40%;
      }
    }

    &.progress-3 {
      &:before {
        width: 40%;
      }

      &:after {
        width: 60%;
      }
    }

    &.progress-4 {
      &:before {
        width: 60%;
      }

      &:after {
        width: 80%;
      }
    }

    &.progress-5 {
      &:before {
        width: 100%;
      }

      &:after {
        width: 100%;
      }

      li {
        &:nth-child(5) {
          color: #fff;
        }
      }
    }

    li {
      width: 20%;
      float: left;
      border-radius: 13px;
      position: relative;
      z-index: 3;
    }

    .tip {
      font-size: 12px;
      padding-top: 10px;
      color: #8c8c8c;
    }

    &.progress-1 li:nth-child(1),
    &.progress-2 li:nth-child(1),
    &.progress-3 li:nth-child(1),
    &.progress-4 li:nth-child(1),
    &.progress-5 li:nth-child(1) {
      color: #fff;
    }

    &.progress-2 li:nth-child(2),
    &.progress-3 li:nth-child(2),
    &.progress-4 li:nth-child(2),
    &.progress-5 li:nth-child(2) {
      color: #fff;
    }

    &.progress-3 li:nth-child(3),
    &.progress-4 li:nth-child(3),
    &.progress-5 li:nth-child(3) {
      color: #fff;
    }

    &.progress-4 li:nth-child(4),
    &.progress-5 li:nth-child(4) {
      color: #fff;
    }
  }
  // 商品列表
  .goods-list {
    /deep/table {
      table-layout: auto;
    }
    .order-price {
      padding: 8px 20px;
      text-align: right;
    }
    display: flex;
    .goods-item{
      height: 120px;
      text-align: center;
      display: flex;
      align-content: center;
      font-size:18x;
      margin-right: 10px;
      flex-direction: column;
      img{
        width: 100px;
        height: 100px;
      }
    }
  }
  // 操作栏
  .actions {
    .action-item {
      float: left;
      margin-right: 8px;
    }
  }
}
</style>
